<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    input{font-size:26px;margin-top: 20px;}
    body{background-image: url(img/grassland.png);}
    #mytank{position: absolute;left:10px;top:100px}
  </style>
</head>
<body>
<img id="mytank" src="img/right.png"/>
<script>
  // 209020347罗宋波
  // 获取坦克元素
  var tank = document.getElementById("mytank");
  // 定义初始位置和步长变量
  var x = 0;
  var y = 100;
  var stepSize = 10;
  document.oncontextmenu = function() {//游戏页面禁用右键
    return false;
  }
  document.addEventListener("keydown", function(event) {
    switch (event.key) {
      case "ArrowUp":
      case "w":
        if (y - stepSize >= 0) {
          y -= stepSize;
          tank.style.top = y + "px";
          tank.src = "img/up.png"; // 更新坦克图片向上移动
        }
        break;
      case "ArrowDown":
      case "s":
        if (y + tank.offsetHeight + stepSize <= window.innerHeight) {
          y += stepSize;
          tank.style.top = y + "px";
          tank.src = "img/down.png"; // 更新坦克图片向下移动
        }
        break;
      case "ArrowLeft":
      case "a":
        if (x - stepSize >= 0) {
          x -= stepSize;
          tank.style.left= x+"px";
          tank.src="img/left.png";//更新坦克图片向左移动
        }
        break;
      case "ArrowRight":
      case "d":
        if (x + tank.offsetWidth + stepSize <= window.innerWidth) {
          x += stepSize;
          tank.style.left= x+"px";
          tank.src="img/right.png";//更新坦克图片向右移动
        }
        break;
    }
  });
</script>
</body>
</html>
